<template>
	<el-dropdown trigger="click" @command="handleLanguageChange">
		<div>
			<svg-icon icon-class="language" :size="props.size"/>
		</div>
		<template #dropdown>
			<el-dropdown-menu>
				<el-dropdown-item :disabled="appStore.language == 'zh-cn'" command="zh-cn">
					中文
				</el-dropdown-item>
				<el-dropdown-item :disabled="appStore.language == 'en'" command="en">
					English
				</el-dropdown-item>
			</el-dropdown-menu>
		</template>
	</el-dropdown>
</template>
<script setup lang="ts">
import { useAppStore } from '@/store/modules/app.ts';
import { useI18n } from 'vue-i18n';
import { ElMessage } from 'element-plus';
interface Iprops{
	size:string;
}
const props = defineProps<Iprops>();

const appStore = useAppStore();

const { locale, t } = useI18n();

function handleLanguageChange(lang: string) {
	locale.value = lang;
	appStore.changeLanguage(lang);
	// if (lang == 'en') {
	// 	ElMessage.success('Switch Language Successful');
	// } else {
	// 	ElMessage.success('语言切换成功');
	// }
	ElMessage.success(t('langSelect.message.success'));
}

</script>

